<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList" @emptyViewReload="toRelease" :empty-view-reload-text="empty.emptyBtnText" :empty-view-reload-style="empty.emptyToReleaseStyle" :show-empty-view-reload-when-error="false" :show-empty-view-reload="true" :empty-view-img="empty.emptyImgUrl" :empty-view-img-style="empty.emptyImgStyle" :empty-view-text="empty.emptyText">
			<view class="new-fans">
				<view class="fans" v-for="(item,index) in dataList" :key="index">
					<view class="head" @click="toUserInfo(item.userId,index)">
						<image :src="item.avatar" mode=""></image>
						<view class="red-dot" v-if="!item.isRead"></view>
					</view>
					<view class="text-css">
						<view class="text" @click="toUserInfo(item.userId,index)">
							<text>{{item.username}}</text>
							<text>关注了你</text>
						</view>
						<view class="follow" v-if="!item.isMutual" @click="followClick(item.userId,true,index)">
							<text>+ 关注</text>
						</view>
						<view class="unfollow" v-else @click="followClick(item.userId,false,index)">
							<text>已关注</text>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		
		<confirmPopup :popupShow="cancelFollowPopupShow" title="取消关注" subhead="是否取消该关注" @popupHide="cancelFollowPopupHide" @popupConfirm="cancelFollowConfirm"></confirmPopup>
		
	</view>
</template>
<script>
	import {
		userFansListApi,
		userFollowAddApi,
		userFansReadAddApi
	} from '../../api/index.js'
	import confirmPopup from './common/currencyPopup.vue'
	export default {
		components:{
			confirmPopup
		},
		data() {
			return {
				cancelFollowPopupShow:false,
				dataList: [],
				empty:{
					emptyText:'您还没收到关注，先去发布一条动态吧～',
					emptyImgUrl:'/static/empty/follow-empty.png',
					emptyImgStyle:{
						width:'225px',
						height:'154px'
					},
					emptyToReleaseStyle:{
						padding:'10px 30px',
						backgroundColor:'#4ABC5A',
						borderRadius:'20px',
						color:'#FFFFFF',
						border:'none'
					},
					emptyBtnText:'去发布'
				},
				selectIndex:9999999,
			};
		},
		onLoad() {

		},
		onBackPress() {
			console.log('页面返回')
			userFansReadAddApi({
				isAll:true,
				mid:0,
			}).then(res =>{
				
			})
		},
		methods: {
			
			//空状态，去发布
			toRelease(e){
				e(false);
				uni.navigateTo({
					url:'./releaseDynamic'
				})
			},
			
			//下拉刷新,上拉加载
			async queryList(pageNo, pageSize) {
				try {
					const res = await userFansListApi({
						pageNum: pageNo,
						pageSize: pageSize + 5,
					})
					this.$refs.paging.complete(res.data);
				} catch (e) {
					//TODO handle the exception
					// 如果请求失败
					this.$refs.paging.complete(false) //展示错误页面
				}

				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过this.$refs.paging.complete(请求回来的数组)将请求结果传给z-paging
				// this.$request.queryList({
				// 	pageNo,
				// 	pageSize
				// }).then(res => {
				// 	//请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
				// 	this.$refs.paging.complete(res.data.list);
				// }).catch(res => {
				// 	//如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
				// 	//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
				// 	//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
				// 	this.$refs.paging.complete(false);
				// })
			},
			
			//跳转用户信息
			toUserInfo(id,index){
				uni.navigateTo({
					url:'./userInfo?userId=' + id,
					complete: (com) => {
						if(!this.dataList[index].isRead){
							userFansReadAddApi({
								isAll:false,
								mid:id
							}).then(res =>{
								this.dataList[index].isRead = !this.dataList[index].isRead
							})
						}
					}
					
				})
			},
			
			//关注点击
			async followClick(id,type,index){
				try{
					this.selectIndex = index
					if(type){
						const res = await userFollowAddApi({
							beFollowId:id,
							following:type
						})
						uni.showToast({
							title: '关注成功',
							icon:'none'
						})
						this.dataList[index].isMutual = type
					}else{
						this.cancelFollowPopupShow = true
					}
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.message || e.data,
						icon: 'none'
					})
				}
			},
			
			//取消关注 弹窗关闭
			cancelFollowPopupHide(e){
				this.cancelFollowPopupShow = e
			},
			
			//取消关注弹窗 确定
			async cancelFollowConfirm(){
				try{
					// 取关操作
					const res = await userFollowAddApi({
						beFollowId: this.dataList[this.selectIndex].userId,
						following: false
					})
					uni.showToast({
						title: '取关成功',
						icon: 'none'
					})
					this.dataList[this.selectIndex].isMutual = false
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.message || e.data,
						icon: 'none'
					})
				}
				this.cancelFollowPopupShow = false
			},
		},
	}
</script>

<style lang="scss"> 
	.new-fans {
		padding: 60upx 40upx 0;
	}

	.fans {
		display: flex;
		margin-bottom: 40upx;
		justify-content: space-between;

		.head {
			position: relative;

			&>image {
				width: 80upx;
				height: 80upx;
				background: #0098DF;
				border-radius: 50%;
			}

			.red-dot {
				width: 22upx;
				height: 22upx;
				border: 2upx solid #F7F7F7;
				background: linear-gradient(-10deg, #FF0000 0%, #FF4E4F 100%);
				border-radius: 50%;
				position: absolute;
				top: 0upx;
				right: 0upx;
			}
		}

		.text-css {
			padding-left: 22upx;
			display: flex;
			width: calc(100% - 102upx);
			justify-content: space-between;
			align-items: center;

			.text {
				// width: 288upx;
				height: 26upx;
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
				width: calc(100% - 145upx);
				align-items: center;
				display: flex;

				text:first-child {
					max-width: calc(100% - 160upx);
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					display: inline-block;
				}

				text:last-child {
					color: #4F4F4F;
					padding-left: 18upx;
				}
			}

			.follow {
				width: 145upx;
				height: 60upx;
				line-height: 60upx;
				text-align: center;
				border: 2upx solid #333333;
				border-radius: 30upx;
			}

			.unfollow {
				width: 145upx;
				height: 60upx;
				line-height: 60upx;
				text-align: center;
				border: 2upx solid #F7F7F7;
				border-radius: 30upx;
				background: #F7F7F7;
				color: #B2B4B5;
			}
		}
	}
</style>
